<script>
import { deleteAccount } from '@/api/user'
import { useUserStore } from '@/store/user'
import { ref } from 'vue'

export default {
  setup() {
    const userStore = useUserStore()
    const form = ref(null)

    const formData = ref({
      password: '',
      agreement: false,
    })

    const rules = {
      password: {
        rules: [
          { required: true, errorMessage: '请输入密码' },
        ],
      },
      agreement: {
        rules: [
          {
            validateFunction: (rule, value, data) => {
              return value === true
            },
            errorMessage: '请确认您已知晓账号注销的后果',
          },
        ],
      },
    }

    const onAgreementChange = (e) => {
      formData.value.agreement = e.detail.value.length > 0
    }

    const handleDelete = async () => {
      try {
        const valid = await form.value.validate()
        if (!valid)
          return

        uni.showModal({
          title: '确认注销',
          content: '账号注销后将无法恢复，是否继续？',
          success: async (res) => {
            if (res.confirm) {
              try {
                await deleteAccount({
                  password: formData.value.password,
                })

                uni.showToast({
                  title: '账号已注销',
                  icon: 'success',
                })

                setTimeout(() => {
                  userStore.logout()
                  uni.reLaunch({
                    url: '/pages/login/index',
                  })
                }, 1500)
              }
              catch (error) {
                console.error('注销账号失败:', error)
              }
            }
          },
        })
      }
      catch (error) {
        console.error('表单验证失败:', error)
      }
    }

    const goBack = () => {
      uni.navigateBack()
    }

    return {
      form,
      formData,
      rules,
      onAgreementChange,
      handleDelete,
      goBack,
    }
  },
}
</script>

<template>
  <view class="delete-account-container">
    <view class="delete-account-header">
      <text class="title">
        注销账号
      </text>
    </view>

    <view class="warning-box">
      <uni-icons type="info" size="24" color="#ff4d4f" />
      <text class="warning-text">
        注销账号后，您的所有数据将被永久删除且无法恢复，请谨慎操作！
      </text>
    </view>

    <view class="delete-account-form">
      <uni-forms ref="form" :model-value="formData" :rules="rules">
        <uni-forms-item name="password">
          <uni-easyinput
            v-model="formData.password"
            type="password"
            placeholder="请输入密码确认注销"
          />
        </uni-forms-item>

        <uni-forms-item name="agreement">
          <checkbox-group @change="onAgreementChange">
            <label class="agreement-label">
              <checkbox :checked="formData.agreement" />
              <text>我已知晓账号注销的所有后果</text>
            </label>
          </checkbox-group>
        </uni-forms-item>
      </uni-forms>

      <button
        class="delete-btn"
        type="warn"
        @click="handleDelete"
      >
        确认注销
      </button>

      <view class="cancel-btn" @click="goBack">
        取消
      </view>
    </view>

    <view class="consequences">
      <text class="consequences-title">
        注销后将失去：
      </text>
      <view class="consequence-item">
        <uni-icons type="closeempty" size="16" color="#666" />
        <text>所有个人信息</text>
      </view>
      <view class="consequence-item">
        <uni-icons type="closeempty" size="16" color="#666" />
        <text>发布的图书共享信息</text>
      </view>
      <view class="consequence-item">
        <uni-icons type="closeempty" size="16" color="#666" />
        <text>发布的帖子和评论</text>
      </view>
      <view class="consequence-item">
        <uni-icons type="closeempty" size="16" color="#666" />
        <text>借阅历史记录</text>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.delete-account-container {
  padding: 40rpx;

  .delete-account-header {
    text-align: center;
    margin-bottom: 60rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .warning-box {
    display: flex;
    align-items: flex-start;
    gap: 20rpx;
    padding: 30rpx;
    background-color: #fff2f0;
    border-radius: 12rpx;
    margin-bottom: 40rpx;

    .warning-text {
      flex: 1;
      font-size: 28rpx;
      color: #ff4d4f;
      line-height: 1.5;
    }
  }

  .delete-account-form {
    .agreement-label {
      display: flex;
      align-items: center;
      font-size: 28rpx;
      color: #666;
    }

    .delete-btn {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      margin: 40rpx 0 20rpx;
      background-color: #ff4d4f;
      border-radius: 44rpx;
    }

    .cancel-btn {
      text-align: center;
      font-size: 28rpx;
      color: #666;
      padding: 20rpx 0;
    }
  }

  .consequences {
    margin-top: 60rpx;

    .consequences-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      margin-bottom: 30rpx;
    }

    .consequence-item {
      display: flex;
      align-items: center;
      gap: 20rpx;
      margin-bottom: 20rpx;

      text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}
</style>
